<template>
  <div id="detail">
    <el-row>
      <el-col :span="5" class="return"></el-col>
    </el-row>
    <el-card class="box-card">
      <el-row>
        <el-col :span="24">
          <el-form ref="form" label-width="80px" :inline="true">
            <el-form-item label="商户号">
              <el-input v-model="merchant_no"></el-input>
            </el-form-item>
            <el-form-item label="终端号">
              <el-input v-model="terminalno"></el-input>
            </el-form-item>
            <el-form-item label="订单号">
              <el-input v-model="out_trade_no"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="success" @click="query" style="margin-right:20px" icon="el-icon-search">查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="download">下载列表</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="box-card content">
      <el-table :data="tableData" style="width: 100%" :cell-style="cellStyle">
        <el-table-column label="商户号" min-width="15%">
          <template slot-scope="scope">
            <i class="el-icon-goods"></i>
            <span style="margin-left: 10px">{{ scope.row.userName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="终端号" min-width="15%">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.terminalno }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="二维码编号" min-width="10%" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.qrNum }}</span>
          </template>
        </el-table-column> -->
        <el-table-column label="订单号" min-width="25%" header-align="center" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.outNum }}</span>
          </template>
        </el-table-column>

        

        <el-table-column label="支付金额" min-width="10%">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.totalFee/100 }}元</span>
          </template>
        </el-table-column>

        <el-table-column label="支付时间" min-width="20%" align="center">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.succNum }}</span>
          </template>
        </el-table-column>
        <el-table-column label="支付状态" min-width="10%" align="center">
          <template slot-scope="scope">
            <i class="el-icon-circle-check-outline"></i>
            <span style="margin-left: 10px">{{ scope.row.dealed }}</span>
          </template>
        </el-table-column>
        <el-table-column label="失败原因" min-width="10%">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.faildReason }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 25, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>


<script>
import { payDetails } from "../api/api";
import { queryDetails } from "../api/api";
import { downPayList } from "../api/api";
export default {
  data() {
    return {
      merchant_no: "",
      terminalno: "",
      out_trade_no: "",
      total: 100,
      pageSize: 10,
      tableData: [],
      currentPage: 1
    };
  },
  methods: {
    cellStyle({row,columnIndex}){
    if(row.dealed ==  "支付失败" && columnIndex === 6){ //指定坐标
        return 'color:red'
    }else{
        return ''
    }
},
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleSizeChange(val) {
      //分页
      //console.log(`每页 ${val} 条`);
      this.pageSize = val;
      //console.log(this.pageSize);
      this.query();
    },
    handleCurrentChange(val) {
      //console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.query();
    },
    getDetail() {
      let pageJson = {
        username: this.$route.params.username,
        pageNum: this.currentPage,
        pageSize: this.pageSize
      };
      payDetails(pageJson).then(data => {
        this.pageSize = data.data.pageInfo.pageSize;
        this.total = data.data.pageInfo.total;
        this.tableData = [];
        let jsonArray = data.data.pageInfo.list;
        for (let json of jsonArray) {
          let newJson = {};
          newJson.userName = json["merchantNo"];
          newJson["qrNum"] = json["id"];
          if (json["payStatusCode"] == 1) {
            newJson["dealed"] = "支付成功";
            newJson["faildReason"] = "";
          } else if (json["payStatusCode"] == 2) {
            newJson["dealed"] = "支付失败";
            newJson["faildReason"] = json["payStatusMsg"];
          }
          newJson["totalFee"] = json["totalFee"];
          newJson["succNum"] = json["endtime"];
          newJson["terminalno"] = json["terminalno"];
          newJson["outNum"] = json["outTradeNo"];
          this.tableData.push(newJson);
        }
      });
    },
    query() {
      let json = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        merchant_no: this.merchant_no,
        terminalno: parseInt(this.terminalno),
        out_trade_no: this.out_trade_no
      };
      queryDetails(json).then(data => {
        //console.log(data);
        this.pageSize = data.data.pageInfo.pageSize;
        this.total = data.data.pageInfo.total;
        this.tableData = [];
        let jsonArray = data.data.pageInfo.list;
        if (!jsonArray) return;
        let loadingInstance = this.$loading({
          target: "#detail",
          text: "拼命加载中........"
        });
        setTimeout(() => {
          this.$nextTick(() => {
            // 以服务的方式调用的 Loading 需要异步关闭
            loadingInstance.close();
          });
          //this.total = jsonArray.length;
          for (let json of jsonArray) {
            let newJson = {};
          newJson.userName = json["merchantNo"];
          newJson["qrNum"] = json["id"];
          if (json["payStatusCode"] == 1) {
            newJson["dealed"] = "支付成功";
            newJson["faildReason"] = "";
          } else if (json["payStatusCode"] == 2) {
            newJson["dealed"] = "支付失败";
            newJson["faildReason"] = json["payStatusMsg"];
          }
          newJson["totalFee"] = json["totalFee"];
          newJson["succNum"] = json["endtime"];
          newJson["terminalno"] = json["terminalno"];
          newJson["outNum"] = json["outTradeNo"];
          this.tableData.push(newJson);
          }
        }, 1000);
      });
    },
    download() {
      let json = {
        merchant_no: this.merchant_no,
        terminalno: parseInt(this.terminalno),
        out_trade_no: this.out_trade_no
      };
      downPayList(json).then(res => {
        console.log(res.data);
        const content = res.data;
        const blob = new Blob([content]);
        const fileName = "导出信息.xls";
        if ("download" in document.createElement("a")) {
          // 非IE下载
          const elink = document.createElement("a");
          elink.download = fileName;
          elink.style.display = "none";
          elink.href = URL.createObjectURL(blob);
          document.body.appendChild(elink);
          elink.click();
          URL.revokeObjectURL(elink.href); // 释放URL 对象
          document.body.removeChild(elink);
        } else {
          // IE10+下载
          navigator.msSaveBlob(blob, fileName);
        }
      });
    }
  },
  mounted() {
    this.getDetail();
    this.query();
  }
};
</script>




<style lang="less" scoped>
.el-col-2 {
  text-align: center;
  
}
.el-pagination {
  text-align: right;
}
.return {
  margin-top: 10px;
  margin-bottom: 20px;
}
.content{
  margin:30px 0px;
}

</style>
